<template>
  <view class="feedback-detail-container">
    <!-- 头部 -->
    <view class="header">
      <view class="header-left" @click="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="title">反馈详情</text>
      <view class="header-right">
        <text v-if="feedback" class="status-text" :class="getStatusClass(feedback.status)">
          {{ getStatusText(feedback.status) }}
        </text>
      </view>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading">
      <text>加载中...</text>
    </view>

    <!-- 反馈内容 -->
    <view v-else-if="feedback" class="content">
      <!-- 基本信息 -->
      <view class="info-section">
        <view class="info-item">
          <text class="info-label">反馈时间：</text>
          <text class="info-value">{{ formatDateTime(feedback.createdAt) }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">反馈对象：</text>
          <text class="info-value">{{ feedback.adminRealName || '未指定' }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">处理状态：</text>
          <text class="info-value" :class="getStatusClass(feedback.status)">
            {{ getStatusText(feedback.status) }}
          </text>
        </view>
      </view>

      <!-- 反馈内容 -->
      <view class="content-section">
        <view class="section-title">反馈内容</view>
        <view class="content-text">{{ feedback.content }}</view>
      </view>

      <!-- 反馈图片 -->
      <view v-if="feedback.images" class="images-section">
        <view class="section-title">相关图片</view>
        <view class="image-list">
          <view 
            v-for="(image, index) in imageList" 
            :key="index" 
            class="image-item"
            @click="previewImage(index)"
          >
            <image :src="image" class="feedback-image" mode="aspectFill" />
          </view>
        </view>
      </view>

      <!-- 管理员回复 -->
      <view v-if="feedback.adminReply" class="reply-section">
        <view class="section-title">管理员回复</view>
        <view class="reply-content">
          <view class="reply-text">{{ feedback.adminReply }}</view>
          <view v-if="feedback.repliedAt" class="reply-time">
            {{ formatDateTime(feedback.repliedAt) }}
          </view>
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-section">
        <button 
          v-if="feedback.status === 'PENDING'"
          class="action-btn delete" 
          @click="deleteFeedback"
        >
          删除反馈
        </button>
        
        <button 
          v-if="feedback.status === 'PENDING'"
          class="action-btn primary" 
          @click="goToAddFeedback"
        >
          重新反馈
        </button>
      </view>
    </view>

    <!-- 错误状态 -->
    <view v-else class="error">
      <text>反馈不存在或已被删除</text>
    </view>
  </view>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import request from '@/utils/request.js'
import tokenManager from '@/utils/token.js'

export default {
  name: 'FeedbackDetail',
  setup() {
    const loading = ref(false)
    const feedback = ref(null)
    const feedbackId = ref(null)

    // 计算图片列表
    const imageList = computed(() => {
      if (!feedback.value || !feedback.value.images) return []
      return feedback.value.images.split(',').filter(img => img.trim())
    })

    // 获取反馈详情
    const fetchFeedbackDetail = async () => {
      if (!feedbackId.value) return

      if (!tokenManager.isLoggedIn()) {
        uni.showModal({
          title: '提示',
          content: '请先登录后再查看反馈详情',
          showCancel: false,
          confirmText: '去登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({
                url: '/pages/login/login'
              })
            }
          }
        })
        return
      }

      loading.value = true
      try {
        const response = await request.request({
          url: `/feedback/detail/${feedbackId.value}`,
          method: 'GET'
        })

        if (response.code === 200) {
          feedback.value = response.data
        } else if (response.code === 404) {
          feedback.value = null
        } else {
          uni.showToast({
            title: response.message || '获取反馈详情失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取反馈详情错误:', error)
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        })
      } finally {
        loading.value = false
      }
    }

    // 删除反馈
    const deleteFeedback = () => {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这条反馈吗？删除后无法恢复。',
        success: async (res) => {
          if (res.confirm) {
            try {
              const response = await request.request({
                url: `/feedback/delete/${feedbackId.value}`,
                method: 'DELETE'
              })

              if (response.code === 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                })
                
                setTimeout(() => {
                  uni.navigateBack()
                }, 1500)
              } else {
                uni.showToast({
                  title: response.message || '删除失败',
                  icon: 'none'
                })
              }
            } catch (error) {
              console.error('删除反馈错误:', error)
              uni.showToast({
                title: '网络错误',
                icon: 'none'
              })
            }
          }
        }
      })
    }

    // 预览图片
    const previewImage = (index) => {
      uni.previewImage({
        urls: imageList.value,
        current: index
      })
    }

    // 跳转到添加反馈页面
    const goToAddFeedback = () => {
      uni.navigateTo({
        url: '/pages/feedback/add-feedback'
      })
    }

    // 返回上一页
    const goBack = () => {
      uni.navigateBack()
    }

    // 获取状态样式类
    const getStatusClass = (status) => {
      switch (status) {
        case 'PENDING': return 'status-pending'
        case 'PROCESSING': return 'status-processing'
        case 'RESOLVED': return 'status-resolved'
        case 'REJECTED': return 'status-rejected'
        default: return 'status-default'
      }
    }

    // 获取状态文本
    const getStatusText = (status) => {
      switch (status) {
        case 'PENDING': return '待处理'
        case 'PROCESSING': return '处理中'
        case 'RESOLVED': return '已解决'
        case 'REJECTED': return '已拒绝'
        default: return '未知'
      }
    }

    // 格式化日期时间
    const formatDateTime = (dateString) => {
      if (!dateString) return ''
      const date = new Date(dateString)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    }

    onMounted(() => {
      // 获取页面参数
      const pages = getCurrentPages()
      const currentPage = pages[pages.length - 1]
      feedbackId.value = currentPage.options.id
      
      if (feedbackId.value) {
        fetchFeedbackDetail()
      } else {
        uni.showToast({
          title: '参数错误',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }
    })

    return {
      loading,
      feedback,
      imageList,
      fetchFeedbackDetail,
      deleteFeedback,
      previewImage,
      goToAddFeedback,
      goBack,
      getStatusClass,
      getStatusText,
      formatDateTime
    }
  }
}
</script>

<style scoped>
.feedback-detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: white;
  border-bottom: 2rpx solid #f0f0f0;
}

.header-left, .header-right {
  width: 80rpx;
  display: flex;
  justify-content: center;
}

.back-icon {
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.status-text {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

.status-pending {
  background-color: #fff3cd;
  color: #856404;
}

.status-processing {
  background-color: #d1ecf1;
  color: #0c5460;
}

.status-resolved {
  background-color: #d4edda;
  color: #155724;
}

.status-rejected {
  background-color: #f8d7da;
  color: #721c24;
}

.loading, .error {
  text-align: center;
  padding: 100rpx 30rpx;
  color: #999;
}

.content {
  padding: 30rpx;
}

.info-section, .content-section, .images-section, .reply-section {
  background-color: white;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.info-label {
  font-size: 26rpx;
  color: #666;
  width: 160rpx;
}

.info-value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}

.content-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.image-item {
  width: 200rpx;
  height: 200rpx;
}

.feedback-image {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

.reply-content {
  background-color: #f8f9fa;
  border-radius: 8rpx;
  padding: 20rpx;
  border-left: 4rpx solid #4CAF50;
}

.reply-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 12rpx;
}

.reply-time {
  font-size: 22rpx;
  color: #999;
}

.action-section {
  display: flex;
  gap: 20rpx;
  padding: 30rpx;
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 12rpx;
  border: none;
  font-size: 26rpx;
  font-weight: bold;
}

.action-btn.primary {
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: white;
}

.action-btn.delete {
  background-color: #ff4757;
  color: white;
}
</style>


